import React from "react";
import MyTable from "../../components/MyTable";
import { Space, Table, Tag, Button } from "antd";
import { useState } from "react";
import { useSelector, useDispatch } from "react-redux";

export default function UserList() {
  const dispatch = useDispatch();
  const [searchData, setSearchData] = useState({});
  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "Age",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "Address",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "Tags",
      key: "tags",
      dataIndex: "tags",
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? "geekblue" : "green";
            if (tag === "loser") {
              color = "volcano";
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: "Action",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button
            onClick={() => {
              handleClick(record);
            }}
          >
            Invite {record.name}
          </Button>
          <Button>Delete</Button>
        </Space>
      ),
    },
  ];
  const data = [
    {
      key: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      tags: ["nice", "developer"],
    },
    {
      key: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      tags: ["loser"],
    },
    {
      key: "3",
      name: "Joe Black",
      age: 32,
      address: "Sydney No. 1 Lake Park",
      tags: ["cool", "teacher"],
    },
  ];
  const searchList = [
    {
      text: "公司名称",
      companyName: "22",
      type: "input",
      key: "companyName",
      placeholder: "请填写公司名称",
    },
    {
      text: "状态",
      type: "select",
      key: "status",
      status: "",
      placeholder: "请选择状态",
      options: [
        {
          value: "1",
          label: "待审核",
        },
        {
          value: "2",
          label: "审核通过",
        },
        {
          value: "3",
          label: "审核拒绝",
        },
      ],
      clear: function () {},
    },
    {
      text: "启用状态",
      type: "select",
      key: "vaild",
      vaild: "",
      placeholder: "请选择启用状态",
      options: [
        {
          value: "1",
          label: "启用",
        },
        {
          value: "0",
          label: "禁用",
        },
      ],
      clear: function () {},
    },
    {
      text: "用户类型",
      type: "select",
      key: "bmerchantType",
      bmerchantType: "1",
      placeholder: "请选择用户类型",
      options: [
        {
          value: 3,
          label: "个人用户",
        },
        {
          value: 1,
          label: "企业用户",
        },
      ],
      clear: function () {},
    },
  ];
  const handleClick = (record) => {
    console.log(record);
  };
  const handleFilter = (searchData) => {
    setSearchData(searchData);
    getList();
  };
  const getList = () => {
    dispatch({ type: "showLoading" }); //开启loading
    setTimeout(() => {
      dispatch({ type: "hideLoading" });
    }, 2000);
  };
  return (
    <div>
      <div className="searchList"></div>
      <MyTable
        columns={columns}
        data={data}
        searchList={searchList}
        handleFilter={handleFilter}
      ></MyTable>
    </div>
  );
}
